import React, { Component } from 'react'
import { Form, Input, Button, Checkbox } from 'antd';
export default class AntForm extends Component {
    constructor() {
        super();
        this.state = {
            layout: {
                labelCol: {
                    span: 8,
                },
                wrapperCol: {
                    span: 16,
                },
            },
            tailLayout: {
                wrapperCol: {
                    offset: 8,
                    span: 16,
                },
            },

        }
    }
    Demo = () => {
        const onFinish = (values) => {
            console.log('Success:', values);
        };

        const onFinishFailed = (errorInfo) => {
            console.log('Failed:', errorInfo);
        }
    }
    componentWillMount(){
        this.getData();
    }
    getData(){
        this.$axios('https://api.imjad.cn/cloudmusic/?type=detail&id=28012031')
        .then(res=>{
          this.setState({
            picUrl:res.data.songs[0].al.picUrl
          })
        })
        .catch(err=>{
            console.log(err);
        })
    }
    render() {
        return (
            <div>
                <p>使用antd的form组件写一个表单</p>
                <img src={this.state.picUrl}/>
                {/* <Button onClick={this.getData.bind(this)}>发请求</Button> */}
                <Form
                    {...this.state.layout}
                    name="basic"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.Demo.onFinish}
                    onFinishFailed={this.Demo.onFinishFailed}
                >
                    <Form.Item
                        label="Username"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Password"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item {...this.state.tailLayout} name="remember" valuePropName="checked">
                        <Checkbox>Remember me</Checkbox>
                    </Form.Item>

                    <Form.Item {...this.state.tailLayout}>
                        <Button type="primary" htmlType="submit">
                            Submit
          </Button>
                    </Form.Item>
                </Form>
    );
            </div>
        )
    }
}
